<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Page</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{
            text-align: center;
        }
        .box{
            margin: 0 auto;
            width: 500px;
            height:351px;
            background-color:#ffffff;
            border: 1px solid #1E90FF;
            border-radius:4px;
        }
        h3{
            color: #1E90FF;
        }
        span{
            color: #1E90FF;
            text-align: center;
            display: block;
            float: left;
            margin-left: 16px;
        }
        #input{
            font-size:20px;
            text-indent:10px;
            height:35px;
            width: 230px;
            border-radius:4px;
            border:1px solid #c8cccf;
            color:#6a6f77;
            outline:0;
        }
        button{
            width: 100px; /* 宽度 */
            height: 37px; /* 高度 */
            border-width: 0px; /* 边框宽度 */
            border-radius: 3px; /* 边框半径 */
            background: #1E90FF; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */
            font-family: Microsoft YaHei; /* 设置字体 */
            color: white; /* 字体颜色 */
            font-size: 14px; /* 字体大小 */
        }
        button:hover{
            background: #5599FF;
        }
        .controller_box{
            background-color: #ffffff;
            height: 40px;
            margin-top: 10px;
        }
        .content_box{
            margin-top: 12px;
            height: 230px;
            background-color: #ffffff;
        }
        .content_box_title{
            color: #1E90FF;
            font-size: 30px;
            font-weight: 900;
            text-align: right;
            margin-left: 15px;
            margin-right: 30px;
        }


        #modal {
            display: none;
            position: relative;
            z-index: 1000;
            top: -227px;
            left:0px;
            height: 233px;
            width: 500px;
            background: rgba( 237, 237, 237, .7) url('http://www.sucaijishi.com/uploadfile/2013/0527/20130527034921885.gif') 50% 50% no-repeat;
        }
    </style>
</head>
</head>
<body>
    <div class="box">
        <h3>城市信息一览表</h3>
        <div class="controller_box">
            <input type="text" id="input" value="" placeholder="请输入城市拼音"/>
            <button onclick="pull();">获取</button>
            <button onclick="empty();">清空</button>
        </div>
        <div class="content_box">
            <div class="content_box_title">
                <span id="span1"></span>:更新时间
            </div>
            <div class="content_box_title">
                <span id="span2"></span>:风力&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div class="content_box_title">
                <span id="span3"></span>:城市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div class="content_box_title">
                <span id="span4"></span>:天气&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div class="content_box_title">
                <span id="span5"></span>:温度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
        </div>
        <div id="modal"></div>
    </div>
</body>
<script type="text/javascript">
    function pull(){
        var input = $("#input").val();
        if(!input){
            alert("请输入正确地址：");
            return;
        }
        var re = new RegExp("^[a-zA-Z]+$");
        if (!re.test(input)) {
            alert("注意城市是英文全拼！");
            return;
        }
        $("#modal").show();
        setTimeout(function(){
            $.get("./weather?city=" + input ,function(success){
                var ss = JSON.parse(success);
                $("#span1").html(ss.last_updated);
                $("#span2").html(ss.wind_mph);
                $("#span3").html(ss.city);
                $("#span4").html(ss.text);
                $("#span5").html(ss.temp_c);
                $("#modal").hide();
            });
        },2000);
    }
    function empty(){
        $("#input").val("");
        $("span").html("");
    }
</script>
</html>